// --- 变量定义 ---

// 颜色
@color-primary-text: #303133;
@color-regular-text: #606266;
@color-secondary-text: #909399;
@color-placeholder-text: #c0c4cc;

@theme-color: #19be6b;
@theme-color-dark: #18b566;
@danger-color: #f56c6c;
@warning-color: #f9ae3d;

@bg-color: #f7f8fa;
@card-bg-color: #ffffff;

// 字体大小
@font-size-lg: 28rpx;
@font-size-md: 26rpx;
@font-size-sm: 24rpx;
@font-size-xs: 22rpx;

// 圆角
@border-radius-card: 16rpx;
@border-radius-image: 12rpx;

// --- 页面样式 ---

.audit-container {
  padding: 24rpx;
  background-color: @bg-color;
  min-height: 100vh;
  box-sizing: border-box;
}

.post-card {
  background-color: @card-bg-color;
  border-radius: @border-radius-card;
  padding: 30rpx;
  margin-bottom: 30rpx;
  position: relative;
  overflow: hidden; // 关键：确保覆盖层不会溢出圆角
  transition: all 0.3s ease-in-out;

  &:last-child {
    margin-bottom: 0;
  }
}

.post-content {
  .content-text {
    font-size: @font-size-lg;
    color: @color-primary-text;
    line-height: 1.6;
    word-break: break-all;
  }
}

.price-line {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  .price-label {
    font-size: @font-size-md;
    color: @color-regular-text;
  }
}

.image-grid {
  display: flex;
  flex-wrap: wrap;
  margin: 24rpx -6rpx 0; // 负margin技巧，用于抵消子项的padding

  .image-wrapper {
    box-sizing: border-box;
    width: calc(33.333% - 12rpx);
    height: 0;
    padding-bottom: calc(33.333% - 12rpx); // 关键：保持1:1的宽高比
    margin: 6rpx;
    position: relative;
    
    .post-image {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: @border-radius-image;
      background-color: #eee; // 图片加载前的占位符颜色
    }
  }
}

.action-buttons {
  margin-top: 30rpx;
  display: flex;
  justify-content: flex-end;
  gap: 24rpx; // 按钮间距
}

// 自定义Vant按钮样式
.approve-btn {
  --button-primary-background-color: @theme-color !important;
  --button-primary-border-color: @theme-color !important;
  &:active {
    background-color: @theme-color-dark !important;
  }
}

// 审核状态覆盖层
.status-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  
  // 初始状态：透明且不可点击
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
  
  .status-text {
    color: #fff;
    font-size: 48rpx;
    font-weight: bold;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
  }

  // 通过状态
  &.is-approved {
    background-color: rgba(25, 190, 107, 0.8);
    opacity: 1;
    pointer-events: auto;
  }

  // 限制状态
  &.is-restricted {
    background-color: rgba(245, 108, 108, 0.8);
    opacity: 1;
    pointer-events: auto;
  }
}

.empty-placeholder {
    padding-top: 200rpx;
    text-align: center;
    font-size: @font-size-md;
    color: @color-secondary-text;
}
